<template>
	<view class="qilin-box">
		<view class="qilin-box-header">
			<icon class="iconfont icon-31fanhui1" @click="goBack()"></icon>
			<text>{{title}}</text>
		</view>
		<view class="qilin-box-content">
			<view class="qilin-box-content-title">{{title==="修改昵称"?"我的昵称":"我的抖音号"}}</view>
			<view class="qilin-box-content-input">
				<input type="text" :placeholder="title==='修改昵称'?'请输入您的昵称':'请输入您的抖音号'" maxlength="20" v-model="nickName" @input="inputNickName">
				<icon class="iconfont icon-shanchu" @click="deleteAll()"></icon>
				<view class="qilin-box-content-input-number">{{length}}/20</view>
			</view>
		</view>
		<view class="qilin-box-button" @click="saveNickName()">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName:"",
				length:0,
				title:""
			}
		},
		methods: {
			//点击返回上一页面事件监听
			goBack(){
				uni.navigateBack();
			},
			//点击清空昵称输入框
			deleteAll(){
				this.nickName="";
				this.length=0;
			},
			//监听输入框输入事件监听
			inputNickName(e){
				// console.log(e);
				this.length=e.detail.cursor;
			},
			//点击保存按钮事件监听
			saveNickName(){
				if(this.title==="修改昵称" && this.nickName){
					uni.setStorage({
						key:"nickName",
						data:this.nickName,
						success:()=>{
							uni.navigateBack();
						}
					});
				}else if(this.title==="修改抖音号" && this.nickName){
					uni.setStorage({
						key:"nickNumber",
						data:this.nickName,
						success:()=>{
							uni.navigateBack();
						}
					});
				};
			}
		},
		onLoad(options){
			let data=JSON.parse(decodeURIComponent(options.item));
			// console.log(JSON.parse(decodeURIComponent(options.item)));
			if(data.title==="昵称"){
				this.title="修改昵称";
			}else if(data.title==="抖音号"){
				this.title="修改抖音号";
			};
			this.nickName=data.content;
			this.length=data.content.length;
		}
	}
</script>

<style>
.qilin-box{
	width:100%;
	height:100%;
	background-color:#181725;
	padding-bottom:120rpx;
	color:#fff;
	position:relative;
}
.qilin-box-header{
	text-align:center;
	height:120rpx;
	line-height:120rpx;
}
.qilin-box-header>icon{
	float:left;
	margin-left:20rpx;
}
.qilin-box-header>text{
	font-size:32rpx;
}
.qilin-box-content{
	padding:20rpx;
}
.qilin-box-content-title{
	font-size:24rpx;
	color:#777;
	padding:0 0 20rpx 0;
}
.qilin-box-content-input{
	position:relative;
}
.qilin-box-content-input>input{
	font-size:24rpx;
	color:#fff;
	width:80%;
}
.qilin-box-content-input>icon{
	position:absolute;
	right:10rpx;
	top:-15rpx;
	font-size:24rpx;
	width:20%;
	text-align:right;
}
.qilin-box-content-input-number{
	font-size:22rpx;
	color:#777;
	padding:20rpx 0;
}
.qilin-box-button{
	padding:20rpx;
	background-color:#3b3b44;
	text-align:center;
	border-raidus:10rpx;
	margin:100rpx 50rpx;
}
</style>
